﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8; width=device-width" name="viewport" />
    <title>@ViewBag.Title - Excell-On Store</title>
    <link href="~/favicon.png" rel="shortcut icon" />

    @Styles.Render("~/Content/bootstrap")
    @*@Styles.Render("~/Content/fonts")*@
    @Styles.Render("~/Content/custom")
    @Scripts.Render("~/bundle/jquery")
    @Scripts.Render("~/Scripts/bootstrap")
    @Scripts.Render("~/Scripts/validate")

    @{
        if (ViewBag.Title == null)
        {
            ViewBag.Title = "";
        }

        if (ViewBag.Active == null)
        {
            ViewBag.Active = "";
        }
    }

</head>
<body>
    <nav class="navbar navbar-default" role="navigation">

        <!-- navbar-banner -->
        <div class="navbar-banner">
            <div class="container">
                <a class="brandname pull-left" href="@Url.Action("Index", "Home", null)">
                    <img src="~/Resources/img/logo.png" />Excell-On
                    <strong>Store</strong>
                </a>
                <span class="contact">Call us now: 1800 000 000</span>
            </div>
        </div>
        <!--/ navbar-banner -->

        <div class="container">
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="@if (ViewBag.Active.Equals("Home")) { <text>active</text> } ">
                        <a href="@Url.Action("Index", "Home", null)">Home</a>
                    </li>
                    <li class="@if (ViewBag.Active.Equals("Store")) { <text>active</text> } ">
                        <a href="@Url.Action("Index", "Store", null)">Online Store</a>
                    </li>
                    <li class="@if (ViewBag.Active.Equals("Services")) { <text>active</text> } ">
                        <a href="@Url.Action("Index", "Services", null)">Our Services</a>
                    </li>
                    <li class="@if (ViewBag.Active.Equals("AboutUs")) { <text>active</text> } ">
                        <a href="@Url.Action("Index", "AboutUs", null)">About Us</a>
                    </li>
                </ul>

                <form class="navbar-form navbar-left" action="@Url.Action("Index", "Store")" method="get">
                    <div class="form-group">
                        <input class="form-control" name="search" id="search" type="text" placeholder="Search" value='@ViewBag.search' />
                        <input class="hidden" name="categoryId" type="text" value='@ViewBag.categoryId' />
                    </div>
                    <button class="btn btn-default" type="submit">Go</button>
                </form>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="@Url.Action("Index", "Register", null)">
                            <span class="glyphicon glyphicon-briefcase"></span>
                            &nbsp;Join our Business
                        </a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!--/ container -->
    </nav>
    @RenderBody()

    <div class="footer text-center">
        <p>&COPY; Company 2013 | Need help? Call us at 1-800-000-000 or <a href="#" onclick="return showModalContact();">contact us.</a></p>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="modalContact" tabindex="-1" role="dialog" aria-labelledby="modalContactLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Contact Us</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5">
                            <table class="table table-hover" id="table-contact">
                                <thead>
                                    <tr>
                                        <th>
                                            <img src="~/Resources/img/ico_telephone.png" />Hotline: 1-800-000-000
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="no-hover">Keep in touch</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="mailto:excellonservices@email.com">
                                                <img src="~/Resources/img/ico_gmail.png" />Email
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="skype:excellonservices?chat">
                                                <img src="~/Resources/img/ico_skype.png" />Skype
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="no-hover">Social channels</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="https://www.facebook.com/" target="_blank">
                                                <img src="~/Resources/img/ico_fb.png" />Facebook
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="https://www.twitter.com/" target="_blank">
                                                <img src="~/Resources/img/ico_tw.png" />Twitter
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="https://plus.google.com/" target="_blank">
                                                <img src="~/Resources/img/ico_gplus.png" />Google +
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="https://www.linkedin.com/" target="_blank">
                                                <img src="~/Resources/img/ico_linkedin.png" />LinkedIn
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-7" id="modalContactBody" style="min-height: 531px">

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <script type="text/javascript">
        $(window).load(function () {
        });

        function showModalContact(productId) {
            var content = "";
            var url = '@Url.Action("GetModalContactBody", "Store")';

            $.ajax({
                url: url + '?productId=' + productId,
                success: function (result) {
                    $("#modalContactBody").html(result);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('error');
                    alert("An error has occured: " + errorThrown);
                }
            });

            $('#modalContact').modal('show');
            return false;
        }
    </script>
</body>
</html>
